<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>设置用户等级</title>
</head>
<body>

<div class="layui-container">
    <form class="layui-form " id="setLevel">
        <div class="layui-form-item">
            <label class="layui-form-label">当前等级</label>
            <div class="layui-input-inline">
                <input hidden="hidden" name="id" th:value="${user.id}" />
                <input  th:value="${user.userLevelName}" type="text"  autocomplete="off" class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-inline">
                <select name="userLevelId" lay-verify="required" th:value="${user.userLevelId}">
                    <span th:each="userLevel,userLevelStat:${list}">
                    <option th:text="${userLevel.name}" th:value="${userLevel.id}"></option>
                    </span>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="set">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>

</div>

<script type="text/javascript">
    layui.use(['form', 'layer'], function () {
        var form = layui.form;
        $ = layui.jquery;
        layer = layui.layer;
        form.render(); //更新全部
        form.render('select');
        /*****************************
         * @Description: 表单提交
         * @Param:
         * @return:
         * @Author: 刘涛
         * @Date: 2018/3/14
         *******************************/
        form.on('submit(set)', function (data) {
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
                url: "/user/updateUserLevel",
                dataType: "json",
                data: data.field,
                type: "post",
                success: function (data) {
                      if(data.code==200){
                          layer.closeAll();
                          layer.msg(data.msg, {icon: 1, anim: 1});
                      }
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });
</script>

</body>
</html>